Team 22

• Dashboard design Research
• Front end Research
• Back end Research
• Machine learning Algorithm Research

 

Style 1: Flat designs

 

Flat design is a style type with a focus on writing and text, and uses simple 2d design with bright colours and multiple categories.

 

 

Enroly – use of light theme and a single colour scheme [1]

• Contains 3 tabs which can be switched from past and present data and future advice
• Statistics are in bold and texts are easy to read
• Use of single colour scheme and gradients for all graphs/charts 
• World maps/ pie charts and bar graphs all displayed in size appropriate to its use

 

 

Use of dark theme and various colours

• Compact display, managing to fit a lot of data in a small space. Could also be bad due to cluttered look.
• Use of multiple vibrant colours to contrast the black theme. 
• Combined use of world maps, line graphs, pie charts and bar charts all in 1 display with smaller graphs

 

 

 

 

 

Style 2: Neumorphism

 

This variant of design combines the old style of skeuomorphism and flat design together to create elements. Unlike Skeuomorphism, the elements are not representative of their real-life counterpart, which is similar to the flat design style. However instead of using 2d elements and vibrant colours like flat design, neumorphism uses 3d look alike elements with real life shadowing and a sense of depth is created with certain boxes pushed outwards and others inwards.

 

 

Soft UI – 3d shadows and minimalistic design [2]

Pros –

• Shadows under line graph 
• Minimalist design (no distracting display)
• Premium and rich looking feel
• Easier for developers to design 

 

Cons –

• Low contrast display so it’s hard to differentiate text and elements
• Due to shadows, much less space efficient display

 

 

 

Tesla Cybertruck app [3]

 

Comparison:

Style:

“The additional physicality that neomorphism brings to the table is a relief to users who are experiencing fatigue from the huge increase in screen time recently.” [4]

As seen from this article or study, a majority prefer the flat design. This can be explained because the flat design makes it easier to comprehend and visualize the data. Since we are prioritizing functionality, it is important the stakeholders can see the various graphs and maps clearly. Furthermore, given the quantity of graphs and data that need to be presented to the user, the dashboard must also be space efficient. This means using a neumorph UI style will not be a good idea as a lot of space is required between each icon (if we consider a graph or map each as an icon). Instead, using flat design should be prioritised.

In terms of light vs dark mode, the use of light mode makes the text easier to read when exposed to a bright working environment. Due to the lower contrast in daylight, light mode might make it harder to miss out important information compared to dark mode.

However, dark mode has many advantages. It is easier on the eyes, meaning that workers don’t get eye strain given their job involves looking at computer screens for prolonged periods of time [5]. Furthermore, using an OLED display (organic light-emitting diode), it has been proven that the energy consumption “switching from light mode to dark mode at 100% brightness saves an average of 39%-47% battery power” [6]. Given Volvo’s original goal to reduce carbon emissions via servers and system infrastructures, dark mode is fitting for that reason.

 

 

 

References: 

1. www.eleken.co. (n.d.). Enroly Design Case Study - Eleken. [online] Available at: https://www.eleken.co/cases/enroly 
2. www.creative-tim.com. (n.d.). Soft UI Dashboard by Creative Tim. [online] Available at: https://www.creative-tim.com/product/soft-ui-dashboard 
3. Facebook. (n.d.). Log into Facebook. [online] Available at: https://www.facebook.com/101679714922277/posts/tesla-cybertruck-and-neomorphism-ui-both-loved-and-hated-equallycredits-httpsdri/115187723571476/ 
4. staffing, S.C. | i creative (n.d.). Neumorphism: Lasting Design Style or Short-Term Trend?»» icreatives staffing. [online] i creative staffing. Available at: https://www.icreatives.com/iblog/neuomorphism-design-style/ 
5. Budiu, R. (2020). Dark Mode vs. Light Mode: Which Is Better? [online] Nielsen Norman Group. Available at: https://www.nngroup.com/articles/dark-mode/. 
6. ‌Saving your phones battery life. Available at https://www.purdue.edu/newsroom/releases/2021/Q3/dark-mode-may-not-save-your-phones-battery-life-as-much-as-you-think,-but-there-are-a-few-silver-linings.html 

 

‌‌

In this project, a website will be produced which shows a dashboard of carbon emissions along with recommendations on how to reduce them. We have identified two key front end tools that will be needed: a general purpose JavaScript framework/library and a JavaScript charting library.

Two of the most widely used and supported JavaScript frameworks/libraries are React and Angular; two of the most widely used and supported charting libraires are D3.js and chart.js.

Angular vs React

Type: Angular is a library developed by Google and React is a full framework developed by Meta. This means the bundle size of a fresh React project is smaller – however, this is unlikely to be a major concern in our project as we’re not limited by bundle size.

Device Support: Both React and Angular support both and desktop and mobile browsers. This is unlikely to be a factor as the website developed for our project will only needed to be designed for desktops. However, if in the future a mobile app is developed from our project Meta also has React Native which shares many of its key concepts with React making the learning curve for developers smaller.

Performance: React makes use of virtual DOM. The code the developer writes only interacts with this layer and not the real DOM that takes considerably more time to update. This also allows the developer to store a UI like any other data. Angular however interacts with the real DOM making it generally slower. This could be a factor as we will have lost of changing UI elements in the DOM at any one time in the dashboard and it shouldn’t start the feel sluggish.

Learning Curve: We want to get started on the project quickly and not spend too much time learning new tools if they won’t yield significant benefit. Angular is widely acknowledged to be more complex and difficult to learn than React. Taking time to learn Angular may not enable us to make a fully featured product.

Language: React is used with both JavaScript (ES6+) and JSX (to define virtual DOM elements), whereas Angular can be used with JavaScript or TypeScript. TypeScript has the many advantages of a typed language with JavaScript lacks. This is a factor for us as, especially when working in a team, being able to see the types of data makes code safer and more readable. 

 

 

Chart.js vs D3.js

 

Complexity: D3 is a complex data visualisation tool whereas Chart is a simple charting tool. D3 requires a stepper learning curve and more theoretical understanding of frontend web development as the developer must interact directly with the DOM. This makes it a far more flexible tool. However, there are libraries that are built on top of D3 such as Nivo that abstract some of this complexity away.

Compatibility with React and Angular: Both libraries do not natively support React or Angular but there are many libraries that aid with integration such as react-chartjs-2 and Nivo.

 

Feature Set: D3 supports more types of data visualisation such as a circular bar plot and distribution graphs that Chart doesn’t support. You can also have custom animations and gradients unlike Chart. This comes at the cost off added technical overhead.

 

Performance: Both libraries support datasets with millions of points. More of a concern is getting the data to the front end in an efficient way – this is not impacted by the choice of data visualisation library.

 

Conclusion

Due to the wide community support, low learning curve and easy integration with Nivo, React is likely the best choice of front end tool.

We will have complex data visualisation requirements so D3.js will likely be the best choice of graphing tool. However, to reduce the learning curve we will use it with a Nivo layer which abstracts away some of the complex direct DOM manipulation. It also creates native React elements which will reduce the difficult of integration.

 

References

1: https://www.theseus.fi/bitstream/handle/10024/130495/FInal_Year_Thesis.pdf?sequence=1&isAllowed=y

2: https://www.imaginarycloud.com/blog/angular-vs-react/

3: https://kruschecompany.com/angular-vs-react/#Learning_curve_-_is_it_easier_to_learn_React_or_Angular, https://www.freecodecamp.org/news/angular-vs-react-what-to-choose-for-your-app-2/

4: https://www.diva-portal.org/smash/get/diva2:1112464/FULLTEXT01.pdf

 

 

 

 

Regarding the website we are designing, the dashboard about carbon emission with suggestion that reduce it. We need two main back-end tools, a REST API and a database.

In this literature review we are going to compare Django, Flask and Node.js, and two widely used database: MySQL and MongoDB.

 

Django vs. Flask vs. Node.js

Lets’ compare Django and Flask first, both these two are Python-based web developing frameworks. Then compare Flask with Node.js, the details compare Django and Flask above would be helpful in selecting the frameworks.

 

Django vs. Flask

 

Default Admin: B Both frameworks have a bootstrapped admin application. The distinction is that it is integrated into Django and requires a superuser. However, to develop an admin interface, you must install Flask-Appbuilder, and admin is necessary to administer the backend via the browser.

 

Views and Routes: Both frameworks include ways for declaring methods-based class-based views. Because they are segregated in distinct files in Django, we must explicitly send request objects. A decorator in flask is necessary to indicate the routes for the relevant handlers. The request objects are global and may be accessed without being explicitly passed around. 

 

Forms and Templates: Django's forms are incorporated into the framework and may be provided to template tags. However, Flask-WTF is necessary in Flask, and WTF-Alembic may be used to produce HTML forms based on databased models.

 

Learning Curve: It almost requires the same amount of time to learn both Django and Flask

 

Development efficiency: Not that important, Flask with plugins = Django

 

Performance: Flask framework is lighter than Django, and performs better with negligible differences, especially while considering I/O operations

 

Flask vs. Node.js

First and foremost, Node.js works as a JavaScript runtime environment on the server, allowing only one language to be used up and down the stack, allowing us to move easily between various portions of the project in theory.

 

Flask: Python, Non-blocking I/O requires the use of non-blocking web servers, Slow speed (cause of separated Python interpreter), Easier to debug with python debugger with no dependencies, Low Maintenance

 

Node.js: Chorme’s V8 JavaScript Engine, inherently Provides non-blocking I/O, Faster speed, Requires more effort. Easier with a Development IDE with Bluebird / Promise Library, Higher Maintenance

 

 

MySQL vs. MongoDB

The core of these two systems is alike, both are DBMS. And they support many same languages: Java, Python, Nodes.js, there is no worries when we are choosing the matching API and databases.

 

MongoDB is a document-based non-relational DBMS. It’s called object-based system. It was designed to supplant the MySQL structure as easier way to work with data.

 

MySQL is a table-based relational DBMS. The table-based design is the data query structure for search, and is an SQL database, and a feature that MongoDB does not support is that table joins. Relating two tables together would help us when searching the data.

 

 

Reference:

https://www.softwaretestinghelp.com/django-vs-flask-vs-node/

https://www.ibm.com/cloud/blog/mysql-vs-mongodb

 

 

 

 

Reference:

https://www.softwaretestinghelp.com/django-vs-flask-vs-node/

https://www.ibm.com/cloud/blog/mysql-vs-mongodb

 

 

 

Linear Regression

 

         Linear regression is a simple supervised learning algorithm, it is used to predict the value based on the given set of values. Linear regression fits a straight line or surface that minimises the discrepancies between predicted and actual output values

 

         In our carbon analysis model, we could use it to find a curve that’s fit our graph to figure out the trend of past carbon emission data, and base on it, provide the future prediction of the carbon emission. 

 

                  Performance: On linearly separable datasets Linear regression fits linearly separable datasets almost perfectly and is often used to find the nature of the relationship between variables.

 

                  Overfitting can be reduced by regularisation: Overfitting is a situation that arises when a machine learning model fits a dataset very closely and hence captures the noisy data as well.This negatively impacts the performance of model and reduces its accuracy on the test set. Regularisation is a technique that can be easily implemented and is capable of effectively reducing the complexity of a function so as to reduce the risk of overfitting. 

 

                  Prone to underfittin: A situation that arises when a machine learning model fails to capture the data properly. This typically occurs when the hypothesis function cannot fit the data well.

 

                  Sensitive to outliers: Outliers of a data set are anomalies or extreme values that deviate from the other data points of the distribution.Data outliers can damage the performance

of a machine learning model drastically and can often lead to models with low

accuracy.

 

       

              1. In our carbon emission model, data are regular, to the linear regression should be easy to capture the data and create a fit curve. 

              2. Since its sensitive to outliers, we should detect and eliminate the illegal data before apply linear regression to our model. Fortunately, the K-means algorithm could tackle this problem as well.